<template>
  <div class="login">
    <div class="left">
      <div class="logo"><img src="../assets/common/logo.png"/>济南市疾病预防控制中心</div>
      <div class="left-main"></div>
    </div>
    <div class="right">
      <div class="login-panel">
        <div class="panel-txt">预防接种全程管理系统大数据展示平台</div>
        <el-form :model="loginParams" :rules="rules" ref="loginForm">
          <el-form-item prop="username">
            <div class="input-con">
              <div class="let-top"></div>
              <div class="let-bottom"></div>
              <div class="right-top"></div>
              <div class="right-bottom"></div>
              <el-input v-model="loginParams.username" placeholder="账号" />
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <div class="input-con">
              <div class="let-top"></div>
              <div class="let-bottom"></div>
              <div class="right-top"></div>
              <div class="right-bottom"></div>
              <el-input type="password" placeholder="密码" v-model="loginParams.password"></el-input>
            </div>
          </el-form-item>
          <div class="check-con">
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          </div>
          <el-form-item>
            <div class="input-con">
              <el-button type="primary" @click="submitForm" style="width:100%;">登  录</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'login',

    data() {
      return {
        loginParams: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            { required: false, message: '请输入用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
        },
        showLogin: false,
        checked: false,
      }
    },

    methods: {
      submitForm() {
        this.$refs.loginForm.validate(valid => {
          if(valid) {
            this.$store.dispatch('user/login', {
              ...this.loginParams,
              type: 'password'
            }).then(() => {
              this.$router.push({path: 'department' || '/'})
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>
<style lang="less">
  @import "../styles/login/login.less";
</style>
